<template>
  <section>
    <div
      class="message-time-container"
      v-bind:class="{ checked: sharedPickState.messages.indexOf(message) >= 0 }"
    >
      <p v-if="this.message._showTime" class="time">{{ message._timeStr }}</p>
      <div
        class="message-content-container"
        v-bind:class="{
          checked: sharedPickState.messages.indexOf(message) >= 0,
        }"
      >
        <input
          id="checkbox"
          v-if="sharedConversationState.enableMessageMultiSelection"
          type="checkbox"
          class="checkbox"
          :value="message"
          placeholder=""
          v-model="sharedPickState.messages"
        />
        <RichNotificationMessageContentView
          :message="message"
          v-if="message.messageContent.type === 12"
          @contextmenu.prevent.native="openMessageContextMenu($event, message)"
        />
        <ArticlesMessageContentView
          :message="message"
          v-else-if="message.messageContent.type === 13"
          @contextmenu.prevent.native="openMessageContextMenu($event, message)"
        />
      </div>
    </div>
  </section>
</template>

<script>
import RichNotificationMessageContentView from './RichNotificationMessageContentView'
import ArticlesMessageContentView from './ArticlesMessageContentView'
import Message from '../../../../wfc/messages/message'
import store from '../../../../store'

export default {
  name: 'ContextableNotificationMessageContentContainerView',
  components: {
    ArticlesMessageContentView,
    RichNotificationMessageContentView,
  },
  props: {
    message: {
      type: Message,
      required: true,
    },
  },
  data() {
    return {
      sharedConversationState: store.state.conversation,
      sharedPickState: store.state.pick,
      highLight: false,
    }
  },
  methods: {
    openMessageContextMenu(event, message) {
      this.$emit('openMessageContextMenu', event, message)
      this.highLight = true
    },
    onContextMenuClosed() {
      this.highLight = false
    },
  },
  mounted() {
    this.$eventBus.$on('contextMenuClosed', this.onContextMenuClosed)
  },
  beforeUnmount() {
    this.$eventBus.$off('contextMenuClosed', this.onContextMenuClosed)
  },
}
</script>

<style scoped>
.message-time-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.message-time-container.checked {
  background-color: var(--color-active-2);
}

.message-time-container .time {
  margin: 15px auto;
  text-align: center;
  font-size: 10px;
  background-color: rgba(0, 0, 0, 0.3);
  color: white;
  padding: 2px 5px;
  border-radius: 100px;
}

.message-time-container .receipt {
  margin-right: 70px;
  font-size: 12px;
  color: #b4b4b4;
}

.message-content-container {
  width: 100%;
  display: flex;
  padding: 10px 20px 4px 20px;
  justify-content: center;
  align-items: center;
  position: relative;
}

.message-content-container input {
  position: absolute;
  left: 0;
  margin-left: 20px;
}
</style>
